// 引入React Router的相关组件
import { 
  // BrowserRouter组件被重命名为Router，用于创建一个历史记录和URL管理器的路由器上下文
  BrowserRouter as Router,
  // Routes是React Router v6中的新API，用于定义路由配置
  Routes,
  // Route是React Router的核心组件之一，用于定义路由规则及对应的组件
  Route
} from 'react-router-dom';

// 引入自定义的Navbar组件
import Navbar from './components/Navbar';

// 使用ES6解构语法同时导入多个页面组件
import {
  Home, // 导入首页组件
  About, // 导入关于页组件
  Projects, // 导入项目页组件
  Contact // 导入联系页组件
} from './pages';

// 定义App组件
const App = () => {
  // 返回React元素，渲染主要布局和路由配置
  return (
    // 设置背景色为slate-300并应用20%的不透明度
    <main className='bg-slate-300/20'>
      {/* 创建一个BrowserRouter实例（这里使用别名Router） */}
      <Router>
        {/* 渲染顶部导航栏组件 */}
        <Navbar />

        {/* 使用Routes组件包裹所有Route子组件来定义路由规则 */}
        <Routes>
          {/* 定义根路径"/"对应Home组件 */}
          <Route path="/" element={<Home />} />
          {/* 定义"/about"路径对应About组件 */}
          <Route path="/about" element={<About />} />
          {/* 定义"/projects"路径对应Projects组件 */}
          <Route path="/projects" element={<Projects />} />
          {/* 定义"/contact"路径对应Contact组件 */}
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </Router>
    </main>
  );
};

// 导出App组件作为默认模块
export default App;